<template>
  <div id="building">
  <div id="login-box">
    <el-form :inline="true" :model="form" class="demo-form-inline">

      <el-form-item label="账户">
        <el-input v-model="form.username" placeholder="账户"></el-input>
      </el-form-item>
<br>
      <el-form-item label="密码">
        <el-input v-model="form.password" placeholder="密码"></el-input>
      </el-form-item>
      <br>
      <el-form-item label="验证码">
        <el-input v-model="form.code" placeholder="验证码"></el-input>
      </el-form-item>
      <el-image
          style="width: 120px; height: 50px"
          :src="codeUrl"
          @click="getCode"
      ></el-image>
      <br>
      <div>
        <canvas ref="QRcodeUrl"></canvas>
      </div>
      <br>
      <el-form-item>
        <el-button type="primary" @click="login">登陆</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
import utils from "@/api/utils";
import {API} from "@/api/config";
import QrCode from "qrcode"
export default {
  name: "LoginView",
  mounted() {
    this.getQrcode('http://10.39.10.8:8003/user/detail/')
  },
  data() {
    return {
      form:{},
      codeUrl:'',
      QRcodeUrl:'',
      s1:''
    }
  }, methods: {
    getQrcode(data){
      QrCode.toCanvas(this.$refs.QRcodeUrl,data.id+"---"+data.username,error=>{
        if (error) console.error(error)
      })
    },
    login(){
      this.axios.post("user/login",this.form).then(r=>{
        if (r.data.code==200){
          localStorage.setItem("token",r.data.data.token);
          localStorage.setItem("uid",r.data.data.uid);
          localStorage.setItem("username",r.data.data.username);
          localStorage.setItem("email",r.data.data.email);
          localStorage.setItem("tel",r.data.data.tel);
          this.$message.success("登陆成功");
          this.$router.push("/tree");
        }else {
          this.$message.error(r.data.msg);
        }
      })
    },
    getCode(){
      let time=new Date().getTime();
      let uuid=utils.uuid();
      this.form.uuid=uuid;
      this.codeUrl=API+"/user/getCode?time="+time+"&uuid="+uuid;
    }
  }, created() {
    this.getCode();
    this.getQrcode();
  }
}
</script>

<style scoped>

#building{
  background:url("~@/assets/img.png");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}

#login-box{
  border:1px solid #dccfcf;
  width: 550px;
  margin:180px auto;
  padding: 35px 80px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  box-shadow: 0 0 25px #909399;
  background-color:rgba(255,255,255,0.7);
}
</style>
